<script>
  import anime from "animejs"
  function handler(params) {
    anime({
      targets: ".fun .el",
      translateX: 270,
      direction: "alternate",
      loop: true,
      delay: function (el, i, n) {
        return i * 100
      },
      endDelay: function (el, i, l=8) {
        return (l - i) * 100
      },
    })
  }
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={handler} class="fun">
  {#each {length:8} as _, i}
    <div
      class="flex items-center justify-center w-20 h-20 m-3 bg-yellow-400 el"
    >
      {i}
    </div>
  {/each}
</div>
